<template>
	<div class="shopList">
		

		<div class="shopList_bottom">
			<div class="new">
                <div class="shopList">
                    <div class="shopList_serch">
                        <div class="shopClass">
							<button class='sale_bottom_new_goods_btn' @click="toNew"><i class="el-icon-edit"></i>新建方案</button>
                            
                        </div>
						
                        <div class="shopList_serch_ipt">
							<el-input v-model="input" placeholder="请输入方案名称查询"></el-input>
							<button @click="handerSeach"><i class="el-icon-search"></i>搜索</button>
						</div>
						
                    </div>
                </div>
            </div>

			<!-- 表格 -->
			<div class="shopList_table">
				<div class="shopList_bottom_table">
					<table>
						<tr>
							<th>方案ID</th>
							<th>方案名称</th>
							<th>小区名称</th>
							<th>房型</th>
							<th>建筑面积</th>
							<th>城市</th>
							<th>户型图</th>
							<th>方案封面</th>
							<th>操作</th>
						</tr>
						<tr v-for="(v,i) in tableList" :key="i">
							<td>{{v.designId}}</td>
							<td>{{v.name}}</td>
							<td>{{v.commName}}</td>
							<td>{{v.specName}}</td>
							<td>{{v.srcArea}}</td>
							<td>{{v.city}}</td>
							<td><img :src = v.planPic style="width: 100%;" /></td>
							<td><img :src = v.coverPic style="width: 100%;" /></td>
							<td>
								 
								<button  v-if="v.designPanoUrl" class="editor" @click="toPano(v.designPanoUrl,v.designId)">查看漫游图</button>
								<button  class="editor" @click="toSetCover(v.designId,v.coverPic)">设置封面图</button>
								<button class="editor" @click="toEdit(v.designId)">编辑</button>
								<button class="editor" @click="toSetName(v.designId)">修改方案名</button>
							</td>
						</tr>
						
						<tr v-if="tableList.length == 0">
							<td class="table_title" colspan="15">当前数据空空如也</td>
						</tr>
					</table>
				</div>
			</div>

			<!-- 全选与分页 -->
			<div class="shopList_bottom_page">
				<div class="shopList_bottom_page_left">
					
				</div>
				<div class="shopList_bottom_page_right">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
					 :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
					 background>
					</el-pagination>
				</div>
			</div>
			
			
			
			<el-dialog title="设置封面" :visible.sync="dialogTableVisible">
				<div class="dialogbox">
					<ul>
						<li v-for="val in gridData" :class="val.picId==checkImgID ?'check':val.img == coverPic && !checkImgID?'check':''">
							<img :src='val.img'  @click="checkImg(val.picId)"/>
						</li>
					</ul>
				</div>
			  <div slot="footer" class="dialog-footer">
			        <el-button @click="dialogTableVisible = false">取 消</el-button>
			        <el-button type="primary" @click="upDateCover">确定</el-button>
			      </div>
			</el-dialog>
			
			<el-dialog title="设置封面" :visible.sync="dialogNameVisible">
				<div class="dialogbox">
					<el-input v-model="changeName" placeholder="请输入新的方案名称"></el-input>
				</div>
			  <div slot="footer" class="dialog-footer">
			        <el-button @click="dialogNameVisible = false">取 消</el-button>
			        <el-button type="primary" @click="setName">确定</el-button>
			      </div>
			</el-dialog>

		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				input: '', //搜索框内容
				tableList: [{}],
				checkAll: false,
				page: 1,
				pageSize: 10,
				total: 0,
				checkBoxAll: [], // 选中的数据
				shelvesAlls: [],
				cateList: [],
				value: '',
				coverPic : '',
				checkImgID:"",
				designId:"",
				changeNameID:null,
				changeName:"",
				cate: {
					value: 'cate_id',
					label: 'cate_name',
					children: 'child',
					expandTrigger: 'hover'
				},
				dialogTableVisible: false,
				dialogNameVisible:false,
				gridData:[],
				sid: '',
				// product_id:''
			}
		},
		mounted() {
			this.sid = localStorage.getItem('sid')
			this.getShopList()
		},
		methods: {
			// 获取商品列表
			getShopList(keyword = '') {
				// this.$http.post('/api/root/ProductShop/lst',{page:this.page,pagesize:this.pageSize,keyword,cate_id})
				let params = {
					keyword: keyword,
					page: this.page,
					pagesize: this.pageSize,
					// user_id: this.sid
				}
				this.$api.kjlDesignList(params)
					.then(res => {
						if (res.code == 1) {
							this.tableList = res.data.list;
							this.total = res.data.total	;
						}
					})
			},

			
			
			//点击搜索
			handerSeach() {
				this.getShopList(this.input);
			},

			//点击详情
			toNew() {
				// this.product_id = this.tableList.product_id
				this.$router.push({
					name: 'kjlOnePoint',
					params: {
						gotype: 'toNew',
					}
				})
			},
			//点击详情
			toPano(id,designId) {
				this.$router.push({
					name: 'kjlOnePoint',
					params: {
						gotype: 'toPano',
						url: id,
						'designId':designId,
					}
				})
			},
			//点击编辑
			toEdit(id) {
				// this.product_id = this.tableList.product_id
				this.$router.push({
					name: 'kjlOnePoint',
					params: {
						gotype: 'toPlanEdit',
						planid: id
					}
				})
			},
			//刷新表
			refreshTable() {
				this.dialogNameVisible = false;
				this.getShopList(this.input);
			},
			//设置方案名称
			setName() {
				// this.product_id = this.tableList.product_id
				this.$http.post('/api/admin/designer/KuJiaLe/setName',{design_id:this.changeNameID,name:this.changeName}).then(res => {
					if (res.code == 1) {
						this.$message({
							message: '更新成功',
							type: "success"
						});
						this.changeNameID = null;
						this.changeName = "";
						setTimeout(this.refreshTable, 800);
					}else{
						if(res.msg){
							this.$message({
								message: res.msg,
								type: "error"
							});
						}else{
							this.$message({
								message: '更新失败',
								type: "error"
							});
						}
					}
					
				})
				
			},
			
			//设置封面
			toSetCover(designId,coverPic){
				let params = {
					design_id: designId,
				}
				this.designId = designId;
				this.$api.kjlCoverList(params)
					.then(res => {
						if (res.code == 1) {
							this.gridData = res.data.list;
							this.coverPic = coverPic;
							this.dialogTableVisible = true;
						}
					})
				
			},
			//设置名称
			toSetName(designId){
				this.changeNameID = designId;
				this.dialogNameVisible = true;
			},
			
			checkImg(picId){
				this.checkImgID = picId;
				console.log(this.checkImgID)
			},
			
			upDateCover(){
				let params = {
					design_id:this.designId,
					picId: this.checkImgID,
				}
				this.$api.kjlSetCover(params)
					.then(res => {
						console.log('商品数据', res);
						if (res.code == 1) {
							this.dialogTableVisible = false;
							this.getShopList();
						}
					})
			},
			

			// 多选
			handlerCheckbox(i) {
				console.log(i);
				let arr = this.checkBoxAll;
				if (arr.includes(i)) {
					let index = arr.indexOf(i);
					if (index > -1) {
						arr.splice(index, 1);
						if (this.checkBoxAll.length !== this.tableList.length) {
							this.checkAll = false;
						}
					}
				} else {
					this.checkBoxAll.push(i);
					if (this.checkBoxAll.length == this.tableList.length) {
						this.checkAll = true;
					}
				};
				this.shelvesAlls.push(this.tableList[i].product_id);
			},
			// 全选与全不选
			handerCheckAll() {
				this.checkAll = !this.checkAll;
				let arr = this.tableList.length;
				this.checkBoxAll = [];
				if (this.checkAll) {
					for (let i = 0; i < arr; i++) {
						this.checkBoxAll.push(i);
					}
				} else {
					this.checkBoxAll = [];
				}
				// 去重
				let res = this.checkBoxAll;
				for (let i = 0; i < res.length; i++) {
					for (let j = i + 1; j < res.length; j++) {
						if (res[i] == res[j]) {
							res.splice(j, 1);
							j--;
						}
					}
				};
				this.checkBoxAll.map(v => {
					return this.shelvesAlls.push(this.tableList[v].store_id.toString());;
				})
			},

			// 全选删除
			selectDel() {},

			//分页
			handleSizeChange(val) {
				this.pageSize = val;
				this.getShopList()
			},
			handleCurrentChange(val) {
				this.page = val;
				this.getShopList()
			},

		}
	}
</script>

<style lang="less" scoped>
	@import 'kjlDesignList.less';
	.sale_bottom_new_goods_btn{
		padding: 0 10px;
		height: 40px;
		border-radius: 4px;
		background: #409EFF 10000%;
		border: 0 none;
		outline: none;
		color: #fff;
		font-size: 14px;
		cursor: pointer;
	}
	
	
</style>
<style>
	.dialogbox{
		width: 100%;
	}
	.dialogbox ul{
		width: 100%;
		padding: 0;
		margin: 0;
	}
	.dialogbox ul li{
		width: 80px;
		height: 80px;
		display: inline-block;
		position: relative;
		border: 2px solid #C0C0C0;
		overflow: hidden;
	}
	.dialogbox ul li.check{
		border: 2px solid seagreen;
	}
	.dialogbox ul li img{
		width: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
</style>
